<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水晶森林圣诞幻境</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            overflow: hidden;
            background: radial-gradient(ellipse at bottom, #1a0a2e 0%, #0c0421 70%);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e6e6fa;
            position: relative;
        }
        
        /* 银河背景 */
        .galaxy {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(132, 94, 194, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(94, 156, 194, 0.1) 0%, transparent 30%);
            z-index: 0;
        }
        
        .container {
            position: relative;
            z-index: 20;
            text-align: center;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            margin-bottom: 3rem;
            animation: fadeIn 2s ease-out;
        }
        
        h1 {
            font-size: 3.2rem;
            font-weight: 300;
            margin-bottom: 0.8rem;
            text-shadow: 0 0 20px rgba(180, 150, 255, 0.7);
            letter-spacing: 3px;
            background: linear-gradient(to right, #d4c4fb, #9eeaf9);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: 'Playfair Display', serif;
        }
        
        .subtitle {
            font-size: 1.3rem;
            font-weight: 300;
            max-width: 700px;
            margin: 0 auto;
            opacity: 0.85;
            line-height: 1.7;
        }
        
        /* 艺术树容器 */
        .tree-container {
            position: relative;
            width: 500px;
            height: 700px;
            margin: 0 auto 4rem;
            perspective: 1200px;
            filter: drop-shadow(0 0 30px rgba(158, 234, 249, 0.3));
        }
        
        /* 水晶森林树 */
        .crystal-tree {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
        }
        
        /* 竹编骨架 */
        .bamboo-frame {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 580px;
        }
        
        .bamboo-rib {
            position: absolute;
            width: 6px;
            background: linear-gradient(to bottom, #c8e6c9, #81c784 30%, #4caf50);
            border-radius: 4px;
            transform-origin: bottom;
            box-shadow: 0 0 8px rgba(129, 199, 132, 0.6);
        }
        
        /* 有机曲线造型 */
        .rib-1 { height: 520px; transform: rotate(-15deg); left: 10%; }
        .rib-2 { height: 550px; transform: rotate(-8deg); left: 25%; }
        .rib-3 { height: 580px; left: 50%; } /* 中心主枝 */
        .rib-4 { height: 550px; transform: rotate(8deg); left: 75%; }
        .rib-5 { height: 520px; transform: rotate(15deg); left: 90%; }
        
        /* 横向连接环 */
        .bamboo-ring {
            position: absolute;
            border: 2px solid #81c784;
            border-radius: 50%;
            box-shadow: 0 0 12px rgba(129, 199, 132, 0.7);
        }
        
        .ring-1 { width: 100px; height: 100px; bottom: 150px; left: 50%; transform: translateX(-50%); }
        .ring-2 { width: 180px; height: 180px; bottom: 250px; left: 50%; transform: translateX(-50%); }
        .ring-3 { width: 240px; height: 240px; bottom: 350px; left: 50%; transform: translateX(-50%); }
        .ring-4 { width: 280px; height: 280px; bottom: 450px; left: 50%; transform: translateX(-50%); }
        
        /* 水晶装饰 */
        .crystal {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            transform-origin: center;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
            animation: float 6s infinite ease-in-out;
        }
        
        .crystal::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            transform: rotate(60deg);
        }
        
        .crystal::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            transform: rotate(-60deg);
        }
        
        .crystal-large {
            border-width: 0 20px 35px 20px;
            border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
        }
        
        .crystal-medium {
            border-width: 0 12px 20px 12px;
            border-color: transparent transparent rgba(230, 230, 250, 0.85) transparent;
        }
        
        .crystal-small {
            border-width: 0 8px 14px 8px;
            border-color: transparent transparent rgba(200, 200, 255, 0.8) transparent;
        }
        
        /* 水晶位置 */
        .crystal-1 { top: 20%; left: 25%; animation-delay: 0.2s; }
        .crystal-2 { top: 30%; left: 65%; animation-delay: 1.1s; }
        .crystal-3 { top: 45%; left: 40%; animation-delay: 0.7s; }
        .crystal-4 { top: 55%; left: 75%; animation-delay: 1.5s; }
        .crystal-5 { top: 65%; left: 30%; animation-delay: 0.9s; }
        
        /* 发光苔藓基座 */
        .moss-base {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 320px;
            height: 120px;
            background: 
                radial-gradient(ellipse at center, 
                    rgba(46, 125, 50, 0.6) 0%, 
                    rgba(27, 94, 32, 0.4) 70%,
                    transparent 100%);
            border-radius: 50%;
            filter: blur(8px);
            z-index: 5;
            box-shadow: 0 0 40px rgba(46, 125, 50, 0.4);
        }
        
        .moss-detail {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 30% 70%, rgba(129, 199, 132, 0.3) 0%, transparent 30%),
                radial-gradient(circle at 70% 40%, rgba(76, 175, 80, 0.3) 0%, transparent 40%);
            border-radius: inherit;
        }
        
        /* 光晕效果 */
        .glow {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(158, 234, 249, 0.15) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            filter: blur(30px);
            animation: pulse 8s infinite alternate;
        }
        
        /* 树顶星辰 */
        .star {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 5rem;
            color: #FFF;
            text-shadow: 
                0 0 30px rgba(255, 255, 255, 0.9),
                0 0 60px rgba(158, 234, 249, 0.7),
                0 0 100px rgba(212, 196, 251, 0.5);
            z-index: 30;
            animation: twinkle 4s infinite;
        }
        
        /* 雪花 */
        .snow {
            position: absolute;
            top: -20px;
            background: white;
            border-radius: 50%;
            filter: blur(1.5px);
            opacity: 0.8;
        }
        
        /* 底部文字 */
        .message {
            font-size: 1.2rem;
            font-weight: 300;
            max-width: 600px;
            margin: 3rem auto 0;
            line-height: 1.7;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            backdrop-filter: blur(12px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
            animation: fadeIn 3s ease-out;
        }
        
        /* 动画 */
        @keyframes fall {
            0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0.8; }
            70% { opacity: 0.6; }
            100% { transform: translateY(100vh) translateX(30px) rotate(360deg); opacity: 0; }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
            50% { opacity: 1; transform: translateX(-50%) scale(1.2); filter: brightness(1.5); }
        }
        
        @keyframes pulse {
            0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
            100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .tree-container {
                width: 320px;
                height: 550px;
            }
            
            h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 银河背景 -->
    <div class="galaxy"></div>
    
    <!-- 主容器 -->
    <div class="container">
        <div class="header">
            <h1>水晶森林圣诞</h1>
            <p class="subtitle">当东方竹艺邂逅西方圣诞，在银河雪夜中绽放的有机水晶生命体</p>
        </div>
        
        <!-- 圣诞树容器 -->
        <div class="tree-container">
            <div class="glow"></div>
            
            <div class="crystal-tree">
                <!-- 竹编骨架 -->
                <div class="bamboo-frame">
                    <div class="bamboo-rib rib-1"></div>
                    <div class="bamboo-rib rib-2"></div>
                    <div class="bamboo-rib rib-3"></div>
                    <div class="bamboo-rib rib-4"></div>
                    <div class="bamboo-rib rib-5"></div>
                    
                    <div class="bamboo-ring ring-1"></div>
                    <div class="bamboo-ring ring-2"></div>
                    <div class="bamboo-ring ring-3"></div>
                    <div class="bamboo-ring ring-4"></div>
                </div>
                
                <!-- 水晶装饰 -->
                <div class="crystal crystal-large crystal-1"></div>
                <div class="crystal crystal-medium crystal-2"></div>
                <div class="crystal crystal-small crystal-3"></div>
                <div class="crystal crystal-medium crystal-4"></div>
                <div class="crystal crystal-small crystal-5"></div>
                
                <!-- 发光苔藓基座 -->
                <div class="moss-base">
                    <div class="moss-detail"></div>
                </div>
                
                <!-- 树顶星辰 -->
                <div class="star">✦</div>
            </div>
        </div>
        
        <div class="message">
            <p>灵感源自Claridge's酒店的森林主题艺术树:cite[3]与传统竹编工艺:cite[2]，将有机曲线与水晶元素结合。竹制骨架象征生命韧性，悬挂的冰晶隐喻雪夜精灵，苔藓基座呼应大地生机。在紫色银河背景下，呈现超越传统的圣诞美学。</p>
        </div>
    </div>
    
    <script>
        // 创建雪花
        function createSnow() {
            const body = document.querySelector('body');
            const snowCount = 200;
            
            for (let i = 0; i < snowCount; i++) {
                const snow = document.createElement('div');
                snow.classList.add('snow');
                
                // 随机属性
                const size = Math.random() * 6 + 2;
                const posX = Math.random() * 100;
                const delay = Math.random() * 15;
                const duration = Math.random() * 15 + 10;
                const opacity = Math.random() * 0.5 + 0.3;
                const sway = Math.random() * 30 - 15;
                
                snow.style.width = `${size}px`;
                snow.style.height = `${size}px`;
                snow.style.left = `${posX}%`;
                snow.style.animation = `fall ${duration}s linear ${delay}s infinite`;
                snow.style.opacity = opacity;
                snow.style.setProperty('--sway', `${sway}px`);
                
                body.appendChild(snow);
            }
            
            // 添加CSS动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fall {
                    0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0.8; }
                    70% { opacity: 0.6; }
                    100% { transform: translateY(100vh) translateX(var(--sway)) rotate(360deg); opacity: 0; }
                }
            `;
            document.head.appendChild(style);
        }
        
        // 创建更多水晶
        function createCrystals() {
            const tree = document.querySelector('.crystal-tree');
            const crystalCount = 50;
            
            for (let i = 0; i < crystalCount; i++) {
                const crystal = document.createElement('div');
                crystal.classList.add('crystal');
                
                // 随机大小
                const sizes = ['large', 'medium', 'small'];
                const size = sizes[Math.floor(Math.random() * sizes.length)];
                crystal.classList.add(`crystal-${size}`);
                
                // 随机位置
                const top = Math.random() * 70 + 10; // 10% - 80%
                const left = Math.random() * 80 + 10; // 10% - 90%
                
                // 随机动画延迟
                const delay = Math.random() * 4;
                const duration = Math.random() * 3 + 5;
                
                crystal.style.top = `${top}%`;
                crystal.style.left = `${left}%`;
                crystal.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
                
                tree.appendChild(crystal);
            }
        }
        
        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', () => {
            createSnow();
            createCrystals();
        });
    </script>
</body>
</html>